<!--
// 
// LogUser.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/06.
// 
-->
<template>
    <div class="LogUser">
        <div class="icon" :style="{background: iconColor}">
            <el-icon :style="{color}">
                <User />
            </el-icon>
        </div>
        <span class="user-name" :style="{color}">{{ name }}</span>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    id: {type: Number, default: () => 0},
    name: {type: String, default: () => ""},
    color: {type: String, default: () => "#409EFF"},
    iconColor: {type: String, default: () => "#c6e2ff"},
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.LogUser {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .icon {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background: var(--el-color-primary-light-7);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    .user-name {
        color: var(--el-color-primary);
    }
}
</style>